<template>
    <van-nav-bar
        :title="TypeName"
        left-text="返回"
        left-arrow
        @click-left="back"
        @click-right="show = !show"
    >
    <template #right>
        <van-icon name="search" size="18" />
    </template> 
    </van-nav-bar>

    <van-popup v-model:show="show" position="top">
        <van-search v-model="keywords" placeholder="请输入搜索关键词" @search="search" />
    </van-popup>
    
    <van-dropdown-menu>
        <van-dropdown-item v-model="TypeActive" :options="TypeList" @change="TypeToggle" />
        <van-dropdown-item v-model="FlagActive" :options="FlagList" @change="FlagToggle" />
        <van-dropdown-item v-model="SortActive" :options="SortList" @change="SortToggle" />
        <van-dropdown-item v-model="ByActive" :options="ByList" @change="ByToggle" />
    </van-dropdown-menu>

    <!-- 数据列表 -->
    <van-pull-refresh v-model="refreshing" @refresh="refresh">
        <van-list
            v-model:loading="loading"
            :offset="10"
            :finished="finished"
            finished-text="没有更多了"
            @load="load"
        >
            <ul class="proul">
                <li v-for="item in list">
                    <router-link :to="{path:'/product/info',query:{proid: item.id}}">
                       <img :src="item.thumb_text" /> 
                    </router-link>
                    
                    <router-link :to="{path:'/product/info',query:{proid: item.id}}">
                       <p class="tit">{{item.name}}</p> 
                    </router-link>
               
                    <div class="price">
                        <p>￥{{item.price}}</p>
                    </div>
                </li>
            </ul>
        </van-list>
    </van-pull-refresh>



</template>
<script setup>
    import {getCurrentInstance} from 'vue'
    const {proxy} = getCurrentInstance()

    let TypeActive = proxy.$route.query.hasOwnProperty('typeid') ? proxy.$route.query.typeid : 0
    TypeActive = parseInt(TypeActive)
    TypeActive = ref(TypeActive)
    let TypeName = ref('全部分类')
    let FlagActive = ref('0')
    let SortActive = ref('createtime')
    let ByActive = ref('desc')

    let show = ref(false)
    let keywords = ref('')

    // 下拉刷新
    let list = ref([])
    let page = ref(1)
    let loading = ref(false)
    let finished = ref(false)
    let refreshing = ref(false)
     

    let FlagList = [
      {text: '全部商品', value: '0'},
      {text: '新品', value: '1'},
      {text: '热销', value: '2'},
      {text: '推荐', value: '3'},
    ];

    let TypeList = reactive([
      {text: '全部分类', value: 0},
    ]);

    let SortList = [
      {text: '按上架时间', value: 'createtime'},
      {text: '按价格', value: 'price'},
      {text: '按库存', value: 'stock'}
    ];

    let ByList = [
      {text: '降序', value: 'desc'},
      {text: '升序', value: 'asc'},
    ];

    onBeforeMount(() => { 
        type()
        load()
    })

    // 下拉刷新
    const refresh = async () => {
        page.value = 1
        list.value = []
        finished.value = false
        loading.value = true
        load()
    }

    // 分类请求
    const type = async () => {
        var result = await proxy.$POST({
            url:'/index/type',
            params: {}
        })
        if(result.code == 0){
            proxy.$fail(result.msg)
            return false
        }

        for(var item of result.data){
            TypeList.push({
                text: item.name,
                value: item.id
            })
        }

    }


    // 加载数据
    const load = async () => {
        // 如果刷新状态为true，要改为false
        if(refreshing.value){
            refreshing.value = false
        }

        // 组装数据
        var data = {
            typeid: TypeActive.value,
            flag: FlagActive.value,
            sort: SortActive.value,
            by:ByActive.value,
            keywords: keywords.value,
            page: page.value
        }

        var result = await proxy.$POST({
            url: '/index/list',
            params: data
        })

        // 请求发送完毕后，加载状态完毕
        loading.value = false

        if(result.code == 0){
            finished.value = true
        }else{
            list.value = list.value.concat(result.data.list)
            page.value++

            TypeName.value = result.data.TypeName
        }
    }


    //分类切换
    const TypeToggle = async (value) =>
    {
      TypeActive.value = value
      refresh()
    }

    //属性切换
    const FlagToggle = async (value) =>
    {
      FlagActive.value = value
      refresh()
    }

    //排序切换
    const SortToggle = async (value) =>
    {
      SortActive.value = value
      refresh()
    }

    //排序切换
    const ByToggle = async (value) =>
    {
      ByActive.value = value
      refresh()
    }

    const back = () => {
        proxy.$router.go(-1)
        return false
    }

    const search = () => {
        show.value = false
        refresh()
    }
</script>

<style>
  ul.proul{
    margin-bottom: 30px;
  }
  ul.proul li{
    float: none;
  }
  ul.proul li img{
    height: 180px;
  }
</style>